<template>
	<view>
		<view class="infoItem" @tap="changeImage">
			<view class="infoItem-left">
				<view class="infoItem-title">头像</view>
				<headimg :realSrc="avatar"></headimg>
			</view>
			<i class="iconfont iconright"></i>
		</view>
		<view class="infoItem">
			<view class="infoItem-left">
				<view class="infoItem-title">昵称</view>
				<input type="text" v-model="nicheng" placeholder="请输入昵称" placeholder-class="inputDefault" />
			</view>
		</view>
		<view class="infoItem">
			<view class="infoItem-left">
				<view class="infoItem-title">生日</view>
				<picker mode="date" @change="handelBirthday" :value="birthday">
					<input disabled="true" v-model="birthday" placeholder="请选择生日" placeholder-class="inputDefault" />
				</picker>
			</view>
			<i class="iconfont iconright"></i>
		</view>
		<view class="saveBtn" @tap="updateUserInfo">保存</view>
	</view>
</template>

<script>
	import headimg from '@/components/head_img.vue';
	export default {
		components: {
			headimg
		},
		data() {
			return {
				avatar: uni.getStorageSync('userInfo').avatar, //头像
				nicheng: uni.getStorageSync('userInfo').nicheng ? uni.getStorageSync('userInfo').nicheng : '未设置昵称', //昵称
				birthday: uni.getStorageSync('userInfo').birthday, //生日
			}
		},
		methods: {
			// 选择生日
			handelBirthday(e) {
				this.birthday = e.detail.value;
			},
			// 选择图片
			changeImage() {
				var _this = this;
				uni.chooseImage({
					count: 1, //默认9
					success: function(res) {
						_this.$api.apifile('user/currency.basic/UploadUserImg', {
							file: res.tempFilePaths[0]
						}).then(res => {
							var result = JSON.parse(res.data);
							if (result.code == 200) {
								_this.avatar = result.data.visit_path;
							} else {
								this.util.showDialog('上传失败,请重新上传');
							}
						})
					}
				});
			},
			// 修改个人信息
			updateUserInfo() {
				var data = {
					avatar: this.avatar,
					nicheng: this.nicheng,
					birthday: this.birthday
				}
				this.$api.apiPost('user/currency.basic/UpdateBasic', data).then(res => {
					this.util.showDialog(res.data.msg);
					if (res.data.code == 200) {
						this.$api.apiPost('user/currency.basic/GetUserInfo').then(res => { //修改个人信息成功 & 获取个人信息并替换缓存
							uni.setStorageSync('userInfo', res.data.data);
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.infoItem {
		justify-content: space-between;

		.infoItem-left {
			width: 93%;
			display: inline-flex;
			justify-content: space-between;
			align-items: center;

			.head_image {
				width: 68upx;
				height: 68upx;
			}
		}

		.iconfont {
			width: 7%;
			text-align: right;
		}
	}

	input {
		text-align: right;
	}
</style>
